<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3-seamless-scroll 例子</title>
  <style>
    .singleLine {
      display: flex;
      flex-direction: row;
      height: 40px;
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    .singleLine span {
      display: inline-block;
      height: 20px;
      margin-top: 12px;
      white-space: nowrap;
    }

    .scroll {
      display: inline-block;
      height: 180px;
      width: 390px;
      margin: 0 25px;
      overflow: hidden;
      position: relative;
    }

    .scroll>div:first-child {
      font-weight: bold;
      color: red;
      text-align: center;
    }

    .scroll>div:last-child {
      margin-top: 15px;
      height: 260px;
      overflow: hidden;
    }

    .scroll .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 3px 0;
      cursor: pointer;
    }
  </style>
  <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
  <script src="../dist/vue3-seamless-scroll.js"></script>
</head>

<body>
  <div id="app">
    <div class="scroll">
      <div>默认配置</div>
      <vue3-seamless-scroll :list="list" :ease="ease">
        <div class="item" v-for="(item, index) in list" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>
    <div class="scroll">
      <div>手动控制滚动</div>
      <vue3-seamless-scroll :list="list" v-model="scroll">
        <div class="item" v-for="(item, index) in list" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>
    <div class="scroll">
      <div>向下滚动</div>
      <vue3-seamless-scroll :list="list" direction="down">
        <div class="item" v-for="(item, index) in list" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>

    <div class="scroll">
      <div>向左滚动</div>
      <vue3-seamless-scroll :list="list" direction="left">
        <div class="item" v-for="(item, index) in list" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>

    <div class="scroll">
      <div>滚动速度</div>
      <vue3-seamless-scroll :list="list" :step="3">
        <div class="item" v-for="(item, index) in list" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>

    <div class="scroll">
      <div>鼠标悬停</div>
      <vue3-seamless-scroll :list="list" hover>
        <div class="item" v-for="(item, index) in list" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>

    <div class="scroll">
      <div>单步停顿</div>
      <vue3-seamless-scroll :list="list" :single-height="30">
        <div class="item" v-for="(item, index) in list" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>

    <div class="scroll">
      <div>单行停顿时间</div>
      <vue3-seamless-scroll :list="list" :single-height="30" :single-waitTime="3000">
        <div class="item" v-for="(item, index) in list" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>

    <div class="scroll">
      <div>控制滚动，滚动{{count}}次</div>
      <vue3-seamless-scroll :list="list" :count="count" @count="onCount">
        <div class="item" v-for="(item, index) in list" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>

    <div class="scroll">
      <div>数组属性更新</div>
      <vue3-seamless-scroll :list="list1">
        <div class="item" v-for="(item, index) in list1" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>

    <div class="scroll">
      <div>数组添加数据</div>
      <vue3-seamless-scroll :list="list2">
        <div class="item" v-for="(item, index) in list2" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>

    <div class="scroll">
      <div>插槽方式使用</div>
      <vue3-seamless-scroll :list="list">
        <div class="item" v-for="(item, index) in list" :key="index" @click="onClick(index)">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
        <template #html>
          <div class="item" v-for="(item, index) in list" :key="index" @click="onClick(index)">
            <span>{{ item.title }}</span>
            <span>{{ item.date }}</span>
          </div>
        </template>
      </vue3-seamless-scroll>
    </div>
    <div class="scroll" :style="{height: `${height}px`}">
      <div>父级div高度改变</div>
      <vue3-seamless-scroll :list="list" :ease="ease" ref="testRef">
        <div class="item" v-for="(item, index) in list" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>
    <div class="scroll">
      <div>未达到滚动条件直接显示原有的数据</div>
      <vue3-seamless-scroll :list="list2" :ease="ease" :limit-scroll-num="7">
        <div class="item" v-for="(item, index) in list2" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>
    <div class="scroll">
      <div>异步数据触发滚动</div>
      <vue3-seamless-scroll :list="syacList" :ease="ease">
        <div class="item" v-for="(item, index) in syacList" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>
    <div>
      <div style="font-weight: bold; color: red; text-align: center;">单行滚动</div>
      <div class="singleLine">
        <vue3-seamless-scroll :list="list" direction="left" :single-line="true">
          <span v-for="(item, index) in list" :key="index">{{ item.title }}</span>
        </vue3-seamless-scroll>
      </div>
    </div>
  </div>
  <script>
    const listData = [
      {
        title: "Vue3.0 无缝滚动组件展示数据第1条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第2条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第3条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第4条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第5条",
        date: Date.now(),
      },
    ];
    const listData1 = [
      {
        title: "Vue3.0 无缝滚动组件展示数据第1条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第2条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第3条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第4条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第5条",
        date: Date.now(),
      },
    ];
    const listData2 = [
      {
        title: "Vue3.0 无缝滚动组件展示数据第1条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第2条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第3条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第4条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第5条",
        date: Date.now(),
      },
    ];
    const vue3Composition = {
      name: "example",
      setup() {
        const list = Vue.ref(listData);
        const list1 = Vue.ref(listData1);
        const list2 = Vue.ref(listData2);
        const syacList = Vue.ref();
        const scroll = Vue.ref(false);
        const count = Vue.ref(1);
        const ease = Vue.ref({
          x1: 0,
          y1: 0,
          x2: 1,
          y2: 1,
        });
        const height = Vue.ref(500);
        let timer1;

        Vue.onMounted(() => {
          setTimeout(() => {
            syacList.value = listData
            height.value = 180;
          }, 5000);

          setInterval(() => {
            list1.value[1].date =  Date.now();
            list1.value[3].date = Date.now();
          }, 2000);

          timer1 = setInterval(() => {
            list2.value.push({
              title: "Vue3.0 无缝滚动组件展示数据第 "+(list2.value.length+1)+" 条",
              date: Date.now(),
            });
            if (list2.value.length === 9) {
              clearInterval(timer1)
            }
          }, 2000);

          setInterval(() => {
            scroll.value = !scroll.value;
          }, 3000);
        });

        function onCount(num) {
          console.log(num);
          if (num === count.value) {
            setTimeout(() => {
              count.value = num + 1;
            }, 2000);
          }
        }

        function onClick(index) {
          alert(index);
        }

        return {
          list,
          list1,
          list2,
          syacList,
          scroll,
          count,
          onCount,
          onClick,
          ease,
          height,
        }
      }
    };
    const app = Vue.createApp(vue3Composition);
    app.component('Vue3SeamlessScroll', Vue3SeamlessScroll.Vue3SeamlessScroll);
    app.mount("#app");
  </script>
</body>

</html>
